<template>
	   <div>
		 	<div class="com-1">13rrr33</div>
			<div class="content-body pr clear">
				<div class="table clear" id="table">
						<div class="table-left-dye fl">
							<ul class="table-title h-ex-sm lh-ex-sm">
								<li class="w-ex-md fl pr ta-l" v-for="(item,key) in scllorData.slice(0,4)" :key="key" :title="item.title">{{item.title}}</li>
							</ul>
							<ul class="table-main h-lg lh-lg" v-for="(item,ky) in scllorData.slice(5,30)" :key="ky">
								<li class="w-ex-md fl h-pct100 pr ta-l" v-for="(im,index) in scllorData.slice(0,4)" :key="index" :title="im.title">{{im.title}}</li>
							</ul>
							<!-- 滚动条 -->
							<div style="width:100%;height:15px;line-height:15px;"></div>
						</div>
						<div class="out_box out_box_detial  out_box_detial1_left">
							<div class="scroll_box">
								<div class="vertical">
									<span class="inner_ver"></span>
								</div>
								<div class="horizontal">
									<span class="inner_hor"></span>
								</div>
								<div class="inner_box inner_width">
									<div class="table-center">
										<ul class="table-title h-ex-sm lh-ex-sm">
											<li class="w-ex-md fl pr ta-l"  v-for="(item,key) in scllorData.slice(5,30)" :key="key" :title="item.title">{{item.title}}</li>
										</ul>
										<ul class="table-main h-lg lh-lg"  v-for="(im,index) in scllorData.slice(5,30)" :key="index">
											<li class="w-ex-md fl pr ta-l" @click="btnclick($event,index)"  v-for="(item,key) in scllorData.slice(5,30)" :key="key" :title="item.title">{{item.title}}</li>
										</ul>
									</div>
									<!-- 滚动条 -->
									<div style="width:100%;height:15px;line-height:15px;"></div><strong></strong>
								</div>
							</div>
						</div>
				</div>

      </div>
			<div class="com-2">3</div>
            
			<!--框框 -->
			<div class="list-box">你好</div>
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
import axios from 'axios'
import * as scrollBox from '@/models/so.js'
export default {
	name:"gos",
	data(){
		return{
			scllorData:[],
			scrollTop:'',
			obtm:{
				xuankuan:'',
				xuangao:'',
				neigao:'',
				naikuan:"",
				diangao:'',
				diankuan:"",
				istop:''
			}
			
		}
	},
	mounted() {
		setTimeout(()=>{
			scrollBox.init('out_box_detial') 
		},500)
    
  },
	created () {
		this.scllorData = JSON.parse(localStorage.getItem('vdeonData'))
	},
	methods: {
		btnclick(e,index){
			console.log("eee",e)
            var getTop = function (e) {
                var offsetTop = e.offsetTop;
                if (e.offsetParent != null) offsetTop += getTop(e.offsetParent);
                return offsetTop;
            }
            var getLeft = function (e) {
                var offsetLeft = e.offsetLeft;
                if (e.offsetParent != null) offsetLeft += getLeft(e.offsetParent);
                return offsetLeft;
            }
            var tempTop = getTop(e.target);
			var tempLeft = getLeft(e.target);//获取当前点击元素top和left的距离
			document.addEventListener('scroll', this.scrollFun, false);

			//获取滚动条的高度
			if (document.documentElement && document.documentElement.scrollTop) {
				this.scrollTop = document.documentElement.scrollTop;}
			else if (document.body) {
				this.scrollTop = document.body.scrollTop;
			}
			console.log("pl",this.scrollTop)
			  var _this = this;
			var endLeft = tempLeft
			var endTop = tempTop - this.scrollTop;
			this.obtm.istop=this.scrollTop


			var posElement =document.getElementsByClassName("list-box")[0];
			//过去目标元素的宽高和窗口的宽高
			var parentWidth = e.target.offsetWidth;
            var parentHeight = e.target.offsetHeight;
            var winHeight = document.documentElement.clientHeight;
			var winWidth = document.documentElement.clientWidth;

			this.obtm.xuankuan=tempTop,
			this.obtm.xuangao=tempLeft,
			this.obtm.neigao=winHeight,
			this.obtm.naikuan=winHeight
			this.obtm.diangao=parentHeight,
			this.obtm.diankuan=parentWidth
			
			console.log(this.obtm)
			setTimeout(function () {
				//获取悬浮窗口的宽高
				var posElementWidth = posElement.offsetWidth;
				var posElementHeight = posElement.offsetHeight;
					//当前点击元素top+悬浮窗口高-滚动条的高度>
					//整个窗口的高度-40
					// var _this = this;
				//   console.log(
				// 	  "tempTop="+tempTop+"posElementHeight="+posElementHeight

				//   )
				//   console.log(
				// 		+"_this.scrollTop" +_this.scrollTop
				// 		+"winHeight"+winHeight
				//   )
				  if (tempTop + posElementHeight - _this.scrollTop > winHeight - 40) {
                    // 底部条件判断 判断窗口不要超出屏幕区域
                    // if (tempLeft + posElementWidth > winWidth) {
					// 	//当前点击元素left-悬浮窗口的宽-获取悬浮窗口的宽
                    //     posElement.style.left = endLeft - (posElementWidth - parentWidth) + 'px';
                    // } else {
                    //     posElement.style.left = endLeft + 'px';
                    // }
					posElement.style.top = endTop - posElementHeight+10 + 'px';
					//点击的距离+悬浮窗口的宽>获取悬浮窗口的宽
				}else{
					// if (tempLeft + posElementWidth > winWidth) {
                    //     posElement.style.left = endLeft - (posElementWidth - parentWidth) + 'px';
                    // } else {	//当前点击元素left-悬浮窗口的宽-获取悬浮窗口的宽
                    //     posElement.style.left = endLeft + 'px';
                    // }
					posElement.style.top = endTop+10 + 'px';
				} 
				
				  console.log(
					  "tempLeft="+tempTop+"posElementWidth="+posElementHeight
					  +"winWidth="+winWidth
				  )
				if (tempLeft + posElementWidth > winWidth) {
                    posElement.style.left = endLeft - (posElementWidth - parentWidth) -60+'px';
					// posElement.style.top = endTop + 'px';
					  console.log("1111")
                } else {
					posElement.style.left = endLeft + 10+'px';
					 console.log("3333")
				}
			},100)
		},
		scrollFun(e) {
            window.scrollTo(0, this.scrollTop);
        },
	},
	computed:{
		// ...mapState({

		// 	})
	},
	watch:{
		
	},
	components:{

  }
	
}

</script>

<style scoped >
	.list-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #fff;
		min-width: 195px;
		height: 260px;
		border: 1px solid darkgoldenrod;
	}
	.table-detail-left{
        width: 552px;
    }
    .table-detail1-left{
        width: 382px;
    }
    .out_box_detial{
        position: absolute;
        top: 0;
        bottom:0px;
        right:0;
    }
    .out_box_detial_left{
        left:552px;
    }
    .out_box_detial1_left{
       left: 520px;
			}
	.inner_box{
        width:3350px;
    }

    .detail-text{
        text-align: left;
        width: 157px;
        margin-left: 10px;
    }
    .process-text{
        text-align: left;
        width: 120px;
        margin-left: 10px;
    }
    .detail-text em{
        color: #fff;
		}
	/* .inner_box_width {
        width:2300px;
    } */
	/* .inner_box1_width {
        width: 1954px;
    } */
    /* .inner_box1_width {
        width: 3400px;
		} */
		.com-1,.com-2{height: 504px;  border: 1px solid red;}
		.content-body{overflow: hidden;}
		li{overflow: hidden;height: 40px;}
</style>
